<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>古诗</title>
    <script src="./Vue.js"></script>
</head>
<body>
    <div id="example">
        <div v-bind:style="[baseStyle, fontStyle, styleRadius]">
            <h4>枫桥夜泊</h4>
            <p>
                月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。
            </p>
        </div>
    </div>
    <script type="text/javascript">
    var vm = new Vue({
        el:'#example',
        data:{
            width : 400,
            margin : '10px auto',
            padding : 30,
            bgcolor : 'lightblue',
            family : "楷体",
            fontSize : 36,
            color : 'green',
            align : 'center',
            border : '1px solid #CCCCCC',
            boxShadow : '3px 3px 6px #999999',
            mode : 'vertical-rl'//垂直方向自右而左的书写方式
        },
        computed: {
            baseStyle: function () {//基本样式
                return {
                    width: this.width + 'px',
                    margin: this.margin,
                    padding: this.padding + 'px',
                    'background-color': this.bgcolor
                }
            },
            fontStyle: function(){
                return {
                    'font-family': this.family,
                    fontSize: this.fontSize + 'px',
                    color: this.color,
                    'text-align': this.align
                }
            },
            styleRadius: function () {
                return { 
                    border: this.border,
                    'box-shadow': this.boxShadow,
                    'writing-mode': this.mode
                }
            }
        }
    })
    </script>
    
</body>
</html>